09-03-2021

前情提要

以往的學習經驗來說，在撰寫前端時一定會遇到的三大巨人：HTML，掌管網頁的結構、CSS，掌管網頁的外觀樣貌、JacaScript，掌管著網頁的互動邏輯，但我們都是互相引入使用。

在React的世界中卻不是這麼一回事了，所有的事物都會交由==Component== 來做為基礎。 我們會將與Component 相關的程式都放在一起管理，而同時也會建議使用JSX來做撰寫。使用 React 並不一定要使用 JSX。

小簡介：JSX不是全新的語言，而是一種語法糖(Syntatic Sugar)，類似與XML的ECMAScript語法的擴充。是一種JavaScript的語法擴展。

• 語法擴展: 意指JSX並非有效的JavaScript，在Web瀏覽器中是無法讀取到他的。換句話說，若是要正常在瀏覽器顯示就必須要==編譯==文件。

要說JSX 有什麼不同，不如說跟HTML 有什麼相似處吧。
並且要學著開始用Component的角度思考。

一開始看到 React 一定會有個想法：啊！這跟我學的 HTML 怎麼長得不一樣?
在 React 中可以選擇使用 JSX 來做撰寫。

JSX 介紹

初步的認識

JSX 的寫法與 HTML 大概有 90%相似，寫起來就像..

範例：
const myArtivcle = <p></p>

?這會在哪裡看到呢?
答案是會在JS的檔案裡面喔！

• JSX元素會被視為JavaScript表達式，也就是說可以使用在任何的表達式中。

• 使用上可以將一個JSX元素保存到一個變數中，再將此變數傳遞給函數，或是儲存在陣列、物件中。

• ==巢狀寫法==<div></div > 是包覆文句的主要因素，少了他就不能使用了！

? 範例：
// 1-1 將JSX保存在變數中
const myArtivcle = (
    <div>
        <h1>天天Happy，天天學Code</h1>
    </div>
)

// 1-2 將JSX保存在物件中
const myFarm = {
  name: <li>NewNew Farm</li>,
  field: <li>6</li>,
};

標籤的意義

1. JSX 提供更語意化好懂的標籤
2. 寫法非常類似XML，Component命名時首字需大寫，HTML中的Tags 使用小寫。

class FirstStep extends React.Component {
  render() {
    return (
      <div>
        <p>第一步</p>
        <Step />
      </div>
    );
  }
}

React 的思考邏輯，使用Component 比起 Template與顯示邏輯，更能實現關注點分離的概念。

屬性特質

JSX 元素的屬性如同HTML，

• img、input、br，不需要結束標籤的要在後邊加一個slash /

  ? 舉例：
  <img />
  <input />
  <br />
  

不同之處

• 可以透過標籤上的屬性改變外觀，但基於JavaScript的保留關鍵字用法，會有些許的不同。

• 必須以駝峰式的寫法

• class必須改寫成className

  <h1 class="big">Hey</h1>
  

  <h1 className="big">Hey</h1>
  

• for也須改寫成htmlFor

Boolean屬性

在JSX中的屬性名稱但沒有設值為true的狀況！

範例：
<input type="button" disabled />;
// 第一個雖然沒有設值，但結果會與下方的結果相同
<input type="button" disabled={true} />;


換句話說，若沒有屬性，則預設就會為｀false`
<input type="button" />;
<input type="button" disabled={false} />;

擴展屬性

ES6 中... 使用上是迭代物件的意思，能將對應的物件迭代出來。 同時後面設定的屬性會蓋掉前面的相同屬性

var props = {
  style: "width:20px",
  className: "main",
  value: "我在墾丁，天氣晴",  
}

<FirstStep  {...props} value="我在墾丁，天氣晴" />


React.createElement("h1", React._spread({}, props, {value: "我在墾丁，天氣晴"}), "Hello React!");

樣式的使用

JSX的外觀使用方法：{{ }}
第一個{} 是JSX 的語法，第二個{} 是JavaScript 物件。

• 需要以駝峰式的方法命名

<FirstStep style={{ color: '#FFFFFF', fontSize: '30px'}} />

使用JS的作用方法

在JSX 中進行js 的作用方法加上花括號 { }

範例：
// 例如在進行數字相加時
ReactDOM.render(
  <h1>{2 + 3}</h1>,
  document.getElementById('app')
);

事件處理的使用方式

在JSX 中透過inline事件的綁定來監聽並處理事件

• 同樣的在這裡也是使用駝峰式的寫法

<FirstStep onClick={this.onBtn} />
****